<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
	<head>
		<!-- <meta th:replace="common/index :: meta" /> -->
		<title>相片选取</title>
		<link rel="stylesheet" type="text/css" media="all" th:href="@{/assets/admin/skins/default/style.css}" />
		<!-- <link rel="stylesheet" type="text/css" href="../assets/libs/webuploader/webuploader.css" /> -->
		<link rel="stylesheet" type="text/css" href="../assets/file/albumsAdd.css" />
		<script type="text/javascript" src="../assets/scripts/jquery/jquery-1.11.2.min.js" ></script>
		<script type="text/javascript" src="../assets/libs/artDialog/jquery.artDialog.js?skin=default"></script>
		<script type="text/javascript" src="../assets/libs/artDialog/artDialog.iframeTools.js"></script>
		<script type="text/javascript" src="../assets/libs/webuploader/webuploader.min.js"></script>
		<style>
			.tab-content{height:390px;}
			#uploader .placeholder{min-height:170px;}
			#uploader .placeholder .webuploader-pick {width:180px;height:44px;}
			.filelist{list-style:none;margin:0;padding:0;}
			.filelist li{float:left;width:120px;height:140px;border-radius:5px;}
			.filelist li.selected{background:#999;}
			.filelist img{display:block;width:100px;height:100px;margin:10px auto;}
			.filelist .filename{line-height:20px;text-align:center;font-size:12px;text-overflow : ellipsis;overflow: hidden;-o-text-overflow:ellipsis;white-space:nowrap;}
		</style>
	</head>
	<body class="mainbody">
		<div id="floatHead" class="content-tab-wrap">
		  <div class="content-tab">
		    <div class="content-tab-ul-wrap">
		      <ul>
		        <li><a href="javascript:;">本地上传</a></li>
		        <li><a href="javascript:;">在线管理</a></li>
		      </ul>
		    </div>
		  </div>
		</div>
		<div class="tab-content" style="padding:0;">
			<div id="uploader" class="wu-example">
			    <div class="queueList">
			        <div id="dndArea" class="placeholder">
			            <div id="filePicker"></div>
			            <p>或将照片拖到这里，单次最多可选1张</p>
			        </div>
			    </div>
			    <div class="statusBar" style="display:none;">
			        <div class="progress">
			            <span class="text">0%</span>
			            <span class="percentage"></span>
			        </div><div class="info"></div>
			        <div class="btns">
			            <div id="filePicker2"></div><div class="uploadBtn">开始上传</div>
			        </div>
			    </div>
			</div>
		</div>
		<div class="tab-content">
			<ul class="filelist">
				<li th:each="obj : ${albumList}">
					<input type="hidden" th:value="${obj.id}" />
					<img th:src="'album/'+${obj.id}+'?isThumb=true'" />
					<div class="filename" th:text="${obj.name}"></div>
				</li>
			</ul>
			<div style="clear:both;"></div>
		</div>
		
		<script th:inline="javascript">
			var inputName=[[${param.inputName[0]}]];
			$("li").click(function(){
				var id=$(this).find("input").val();
				$("li").removeClass("selected");
				$(this).addClass("selected");
				$.artDialog.data(inputName,id);
			});
			$(".content-tab-ul-wrap a").removeClass("selected").eq(0).addClass("selected");
			$(".tab-content").hide().eq(0).show();
			$(".content-tab-ul-wrap a").each(function(index){
				$(this).click(function(){
					$(".content-tab-ul-wrap a").removeClass("selected").eq(index).addClass("selected");
					$(".tab-content").hide().eq(index).show();
				});
			})
		</script>
		<script src="../assets/file/albumsSelector.js"></script>
	</body>
</html>